/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="user-resource-gpu-wrap">
        <div class="user-resource-gpu__top">
            <header>
                <span class="title">
                    <lang>GPU资源利用趋势图</lang>
                </span>
                <div class="user-resource-gpu__top-right">

                    <sf-radio-group v-model="time" class="user-resource-gpu__top-right-radio">
                        <sf-radio-button v-for="(item, index) in timeOpts" :key="index" :check-value="item.value">{{ item.label }}</sf-radio-button>
                    </sf-radio-group>

                    <sf-select v-model="type"
                               :default-width="100"
                               :default-height="30"
                               :options="typeOpts"
                               :allow-blank="false"></sf-select>
                </div>
            </header>
            <div class="line-charts-wrap">
                <line-charts use="home"
                             :type="type"
                             :time="time"
                             :x-show="true"
                             area-color="#F2EBFF"
                             line-color="#5D1DFF"/>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .user-resource-gpu-wrap {
        width: 100%;
        header {
            font-size: 16px;
            padding: 0 30px;
            height: 48px;
            line-height: 48px;
            .title {
                color: #14161A;
                font-weight: bold;
                cursor: pointer;
            }
        }
        .user-resource-gpu__top {
            background-color: #fff;
            border-radius:0 0 6px 6px;
        }
        .user-resource-gpu__top-right {
            display: flex;
            align-items: center;
            float: right;
            position: relative;
            top: 6px;
            right: 50px
        }
        .user-resource-gpu__top-right-radio {
            display: inline-block;

            .sfv-radio-button {
                margin-right: 15px;
                border: 1px solid #e0e0e0;

                &:first-child {
                    border-left: none;
                }
            }
        }
        .line-charts-wrap {
            height: 400px;
        }
    }
</style>

<script>
import LineCharts from 'src/home/mod_cluster/common/chart/line_chart.vue';
import { SUANLI_VALUE, TYPE_OPTIONS_HOME, ONE_HOUR, TIME_OPTIONS_HOME } from './const';
export default {
    components: {
        LineCharts
    },
    data () {
        return {
            type: SUANLI_VALUE,
            time: ONE_HOUR,
            typeOpts: TYPE_OPTIONS_HOME,
            timeOpts: TIME_OPTIONS_HOME
        };
    },

    methods: {
    }

};
</script>


